<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane
      v-for="item in tags"
      :key="item.id"
      :label="item.label"
      :name="item.name"
    >
      <component v-if="activeName == item.name" :is="item.component" />
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import school from './components/school.vue';
import subject from './components/subject.vue';
import firstClass from './components/firstClass.vue';
import { ref, markRaw } from 'vue';
// 使用 markRaw 标记组件以避免反应性包裹
const tags = ref([
  {
    id: 1,
    name: 'first',
    label: '大学排名',
    component: markRaw(school),
  },
  {
    id: 2,
    name: 'second',
    label: '学科评估',
    component: markRaw(subject),
  },
  {
    id: 3,
    name: 'third',
    label: '双一流学科',
    component: markRaw(firstClass),
  },
]);
const activeName = ref('first');

const handleClick = (tab) => {
  if (tab) {
    if (tab.props.label == '大学排名') {
    } else if (tab.props.label == '学科评估') {
    } else if (tab.props.label == '双一流学科') {
    }
  } else {
    if (activeName.value == 'first') {
    } else if (activeName.value == 'second') {
    } else if (activeName.value == 'third') {
    }
  }
};
function setActiveName(val) {
  activeName.value = val || 'first';
  handleClick();
}

defineExpose({
  setActiveName,
});
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
